<template>
  <div class="view-mode-wrapper" @click="hanldeClick">
    <i
      class="view-mode-icon el-icon-menu"
      data-mode="card"
      :class="{ active: current === mode.CARD }"
    />
    <i
      class="view-mode-icon el-icon-s-data rotate-90"
      data-mode="list"
      :class="{ active: current === mode.LIST }"
    />
    <!-- <i
      class="view-mode-icon iconfont icon-ditu-dibiao"
      data-mode="map"
      :class="{ active: current === mode.MAP }"
    /> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
const mode = {
  LIST: 'list',
  CARD: 'card',
  MAP: 'map',
}
export default Vue.extend({
  components: {},
  data() {
    return {
      mode,
      current: mode.CARD,
    }
  },
  methods: {
    hanldeClick(e) {
      this.current = e.target.dataset.mode
      this.$emit('onChange', this.current)
    },
  },
})
</script>
<style lang="scss" scoped>
.view-mode-icon {
  font-size: 20px !important;
  cursor: pointer;
}

.active {
  color: #006eff;
}
</style>
